import React, { Component } from 'react'
import { connect } from 'react-redux';
import { View, Text, Button } from '@tarojs/components'
import userActions from '../../store/user';
import {Navigator, NavigateType, withRouter} from  "@/utils/navigator";
import routes from "@/routes";

import './index.css'

// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion

// 页面路由传值
type PageRouerProps = {
  router: {
    data: any;
    params: any;
    [key: string]: any;
  }
}

// 页面Redux state传值
type PageStateProps = {
  user: any
}

// 页面Redux Dispatch传值
type PageDispatchProps = {
}

// 页面自己的Props
type PageOwnProps = {}

// 页面自己的State
type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps & PageRouerProps

interface Index {
  props: IProps;
}

class Index extends Component {
  // componentWillReceiveProps (nextProps) {
  //   console.log(this.props, nextProps)
  // }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  componentDidMount() {
    userActions.setUserInfo({
      name: "alvin.xin",
      mobile: "13479502709"
    })
  }

  render () {
    console.log("home props: ", this.props)
    return (
      <View className='index'>
        <View><Text>Hello, Home</Text></View>
        <Button onClick={async () =>  {
          Navigator.navigate(routes.login, {
            type: NavigateType.redirectTo,
            data: {
              home: {username: 'alvin', age: 123},
              testFunc: function(args: any) {
                console.log("testFunc: args: ", args)
              }
            },
            params: {
              pageId: "home",
              pageName: 'home',
              name: "艺间艺术",
              user: {
                username: "亚东",
              }
            }
          })

        }}>跳转login</Button>
      </View>
    )
  }
}

// export default Index

const mapStateToProps = (state: any) => {
	return {
		home: state.home,
		user: state?.user,
	};
};

const mapActionToProps = {
	// do nothing
};

// previewCoursewareBeforeComponent(beforeMount)()
export default connect(mapStateToProps, mapActionToProps)(withRouter(Index));


